<template>
    <div class="banner-width">
        <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000" width="400"
            height="150">
            <nut-swiper-item v-for="item in list" :key="item">
                <img :src="item" alt="" />
            </nut-swiper-item>
        </nut-swiper>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
export default {
    setup() {
        const state = reactive({
            page: 1,
            list: [
                'https://cxj.szzkba.cn/upload/i/2024/07/02/110952.png',
                'https://cxj.szzkba.cn/upload/i/2024/07/02/111117.png',
                'https://cxj.szzkba.cn/upload/i/2024/07/02/111117_1.png'
            ]
        });
        onMounted(() => {
            setTimeout(() => {
                state.list.splice(1, 1);
            }, 3000);
        });
        return { ...toRefs(state) };
    }
};
</script>
<style lang="scss">
.nut-swiper-item {
    line-height: 400px;

    img {
        width: 100%;
        height: 100%;
    }
}

.banner-width {
    margin-left: 5%;
    margin-right: 5%;
}
</style>